<template>
  <div class="cart">
    <div class="bg" v-if="is_ShowCart" @click="showCart(1)"></div>
    <div class="warp_content">
      <div v-if="is_ShowCart">
        <div class="header">
          <div class="checkall" @click="CheckedAll()">
            <i v-if="isAllCheck" class="iconfont icon-xuanzhong-01"></i>
            <i v-else class="iconfont icon-weixuanzhong"></i>
            <span>全选</span>
          </div>
          <span class="clear" @click="ClearAll">清空购物车</span>
        </div>
        <div class="main">
          <div class="item" v-for="(item, index) in listData" :key="index">
            <div class="left">
              <div class="check_item_all">
                <i
                  v-if="item.ischeck"
                  @click="Checked(item.id)"
                  class="iconfont icon-xuanzhong-01"
                ></i>
                <i
                  v-else
                  @click="Checked(item.id)"
                  class="iconfont icon-weixuanzhong"
                ></i>
              </div>
              <div class="picbox">
                <img :src="item.img" />
              </div>
              <div class="text">
                <p class="title">{{ item.name }}</p>
                <p class="price">
                  <span class="now_price">¥{{ item.price }}</span>
                  <del v-if="item.oldprice > 0">¥{{ item.oldprice }}</del>
                </p>
              </div>
            </div>
            <div class="right">
              <span class="jian radius" @click="Sub(item.id)">-</span>
              <span class="number">{{ item.number }}</span>
              <span class="jia radius" @click="Add(item.id)">+</span>
            </div>
          </div>
        </div>
      </div>

      <footer>
        <img
          class="basket"
          @click="showCart"
          src="../../../assets/basket.png"
        />
        <span class="count">{{ listData.length }}</span>

        <span class="text"
          >合计：<i>¥{{ totalPrice }}</i></span
        >
        <!-- <span class="text" v-else>购物车是空的</span> -->
        <button
          :class="{ btn_calc: true, disabled: shop_number == 0 }"
          @click="Calc"
        >
          去结算({{ shop_number }})
        </button>
      </footer>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    //判断全选反选
    isAllCheck() {
      if (this.list.length == 0) return false;
      var index = this.list.findIndex((item) => {
        return item.ischeck == false && item.number > 0;
      });

      return index == -1 ? true : false;
    },
    //计算总价格
    totalPrice() {
      let total = 0;
      this.list.forEach((item) => {
        if (item.ischeck) total += item.number * item.price;
      });
      return total.toFixed(2);
    },
    //统计选中的数量
    shop_number() {
      let length = this.list.filter((item) => {
        return item.ischeck == true && item.number > 0;
      }).length;

      return length;
    },
    listData() {
      //let cartList = this.$store.state.shop.cartList;
      
    let cartModel= this.$store.state.shop.cartList.find((item)=>{
        return item.shopId==this.shopId;

      })

      let resultList = [];
      if (cartModel!=undefined) {
        this.list = cartModel.items;
        resultList = cartModel.items.filter((item) => {
          return item.number > 0;
        });
      }

      //this.list = resultList;
      return resultList;
    },
  },
  mounted() {},
  props: ["isShowCart", "shopId", "shopName"],
  watch: {
    list: {
      handler(val) {
      
        if (val.length == 0) return;
        //需要判断下如果是最后一项的话，则要隐藏购物车
        if (this.list.length == 1 && this.list[0].number == 0) {
          this.is_ShowCart = false;
        }
        
        this.$store.commit("shop/setCartList", {
          list: val,
          shopId: this.shopId,
        });
      },
      deep: true,
    },
  },
  data() {
    return {
      list: [],
      //isAllCheck: false,
      is_ShowCart: this.isShowCart,
    };
  },
  methods: {
    ClearAll() {
      this.list.forEach((item, index) => {
        item.ischeck = false;
        item.number = 0;
      });
      this.is_ShowCart = false;
    },
    CheckedAll() {
      if (this.isAllCheck) {
        this.list.forEach((item, index) => {
          item.ischeck = false;
        });
      } else {
        this.list.forEach((item, index) => {
          item.ischeck = true;
        });
      }
    },

    Checked(id) {
      let index = this.list.findIndex((item) => {
        return item.id == id;
      });
      if (index > -1) this.list[index].ischeck = !this.list[index].ischeck;
    },
    showCart(state) {
      if (state == 1) {
        //空白处点击关闭
        this.is_ShowCart = false;
      } else {
        //从删除购物车按钮点击进来的
        if (!this.is_ShowCart) {
          //有数据才让显示
          if (this.listData.length > 0) this.is_ShowCart = true;
          return;
        }
        this.is_ShowCart = !this.is_ShowCart;
      }
    },
    Calc() {
      //判断购物车是否选中数据
      if (this.listData.length > 0) {
        //将购物车数据创建到订单表
        let orderID = this.$store.state.order.newOrderId;

        let orderModel = {
          orderId: orderID,
          order_status: 0,
          addressId: 0,
          shopId: this.shopId,
          shopName: this.shopName,
          totalPrice: this.totalPrice,
          items: this.list.filter((item) => {
            return item.number > 0 && item.ischeck;
          }),
        };
        //order/CreateOrder
        //setCartList
        
        this.$store.commit("order/createOrder", {
          model: orderModel,
        });

        //清空购物车数据
        this.list.forEach((item, index) => {
          item.ischeck = false;
          item.number = 0;
        });
        //跳转到确认页
        this.$router.push({
          path: "/OrderSumbit",
          query: {
            orderId: orderID,
          },
        });
        //this.$emit('CreOrder');
      }
      //创建订单
      // this.$router.push({ name: "OrderSumbit" });
    },
    Sub(id) {
      let index = this.list.findIndex((it) => {
        return it.id == id;
      });
      if (index > -1) {
        if (this.list[index].number == 1) this.list[index].ischeck = false;
        if (this.list[index].number > 0) {
          this.list[index].number -= 1;
        }

        // this.$store.commit("setCartList", {
        //   list: this.list,
        //   shopId: this.shopId,
        // });
      }
    },
    Add(id) {
      console.log(this.list);
      let index = this.list.findIndex((it) => {
        return it.id == id;
      });

      if (index > -1) {
        this.list[index].number += 1;

        // this.$store.commit("setCartList", {
        //   list: this.list,
        //   shopId: this.shopId,
        // });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.disabled {
  background-color: #cccccc !important;
}
.cart {
  .bg {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
  }
  .warp_content {
    background: #ffffff;

    position: fixed;
    width: 100%;
    bottom: 0;

    .header {
      padding: 18px 18px;
      display: flex;
      justify-content: space-between;

      border-bottom: 1px solid #f1f1f1;
      .checkall {
        i {
          color: #0091ff;
        }
        span {
          margin-left: 8px;
        }

        font-family: PingFangSC-Regular;
        font-size: 14px;

        line-height: 16px;
      }
      .clear {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        text-align: right;
        line-height: 16px;
      }
    }
    .main {
      padding: 16px 18px;
      .item {
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          .check_item_all {
            line-height: 46px;
            color: #0091ff;
          }
          .picbox {
            margin: 0px 16px;
            width: 46px;
            height: 46px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            .title {
              font-family: PingFangSC-Medium;
              font-size: 14px;
              color: #333333;
              line-height: 23px;
            }
            .price {
              line-height: 23px;
              .now_price {
                font-family: PingFangSC-Semibold;
                font-size: 14px;
                color: #000000;
                line-height: 14px;
              }
              del {
                margin-left: 6px;
                font-family: PingFangSC-Regular;
                font-size: 10px;
                color: #999999;
                line-height: 20px;
              }
            }
          }
        }
        .right {
          align-items: center;
          height: 46px;
          line-height: 46px;
          .radius {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
          }
          display: flex;
          .jia {
            background: #0091ff;
            color: white;
          }
          .jian {
            border: 1px solid #666666;
          }
          .number {
            margin: 0 15px;
            line-height: 20px;
            font-size: 12px;
          }
        }
      }
      .item:nth-child(n + 2) {
        margin-top: 16px;
      }
    }

    footer {
      box-shadow: 0 -1px 1px 0 #f1f1f1;

      height: 49px;

      .basket {
        margin-left: 24px;
        margin-top: 11px;
        width: 28px;
        height: 26px;
      }
      .count {
        position: relative;

        top: -15px;
        left: -5px;
        padding: 0 2px;
        text-align: center;
        width: 10px;
        height: 10px;
        color: white;
        border-radius: 60%;

        background-color: red;
      }
      .cou111nt::after {
        content: "10";
        position: absolute;
        top: -15px;
        left: -5px;
        padding-right: 10px;
        text-align: center;
        width: 10px;
        height: 10px;
        color: white;
        border-radius: 50%;

        background-color: red;
      }

      .text {
        margin-left: 32px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        line-height: 49px;
        i {
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #e93b3b;
        }
      }

      .btn_calc {
        width: 98px;
        height: 49px;

        background: #4fb0f9;
        border: none;
        outline: none;
        color: white;
        line-height: 49px;
        text-align: center;
        float: right;
      }
    }
  }
}
</style>
